<template>
	<view class="contract">
		<!-- 自定义导航栏 -->
		<view :style="{ height: navBarHeight + 'px' }" class="custom-nav-bar">
			<view class="nav-back" @click="goBack"><u-icon name="arrow-left" color="#303133" size="24"></u-icon></view>
			<view class="nav-title">文件上传</view>
		</view>
		
		<!-- 页面主体内容 -->
		<view class="main" v-if="name == '文件'">
			<view class="world">
				<view class="ImageBox">
					<image :src="worldImg" mode="widthFix"></image>
				</view>
				<!-- <uni-file-picker ref="files" limit="9" @select="select" file-mediatype="all" :auto-upload="false" file-extname="jpg,png,jpeg,doc,docx,pdf"></uni-file-picker> -->
				<view class="btnBox">
					<uni-file-picker limit="9" @select="select" file-mediatype="all" ref="files" :auto-upload="false" file-extname="jpg,png,jpeg,doc,docx,pdf">请选择微信文件</uni-file-picker>
				</view>
				<view class="text">
					1、支持多种合同类型<br />
					2、支持DOCX、DOC、PDF格式<br />
					3、已过期的文件无法上传
				</view>
			</view>
			
<!-- 			<view class="upLoadItem"
				v-for="(item,index) in fileArr"
				:key="index"
				:style="{ transform: item.translate }"
				@touchstart="handleTouchStart(index, $event)"
				@touchmove="handleTouchMove(index, $event)"
				@touchend="handleTouchEnd"
				@longpress="handleLongPress"> -->
			<view class="upLoadItem" v-for="(item,index) in fileArr" :key="index">
				<view v-if="checkInclude(item,fileEnd)">
					<view class="ImageBox" style="height: 100%;">
						<image style="width: 80rpx;height:80rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);" src="@/static/file.png" mode="aspectFit"></image>
					</view>
					<view class="fileDocUrlsDet" @click.stop.prevent="detDocUrl(index)">
						<u-icon name="close" color="#fff" size="14"></u-icon>
					</view>
				</view>
				
				<view v-else>
					<view class="ImageBox">
						<image :src="item" mode="aspectFill"></image>
					</view>
					<view class="previewBox" @click.stop.prevent="previewImage(index)">预 览</view>
					<view class="fileDocUrlsDet" @click.stop.prevent="detDocUrl(index)">
						<u-icon name="close" color="#fff" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 页面主体内容 -->
		<view class="main" v-else>
			<view class="upLoadItem" v-for="(item,index) in fileArr" :key="index">
				<view class="ImageBox">
					<image :src="item" mode="aspectFill"></image>
				</view>
				<view class="previewBox" @click.stop.prevent="previewImage(index)">预 览</view>
				<view class="fileDocUrlsDet" @click.stop.prevent="detDocUrl(index)">
					<u-icon name="close" color="#fff" size="14"></u-icon>
				</view>
			</view>
			
			<view class="upLoadItem addImage" @click="changeChoose()">
				<u-icon name="plus" color="#303133" size="26"></u-icon>
			</view>
		</view>

		<view class="bottom">
			<view class="" @click="goBack()"><u-button type="default" :plain="true" text="退出审核"></u-button></view>
			<view class="" @click="nextStep()"><u-button type="primary" text="下一步"></u-button></view>
		</view>
	</view>

	<up-popup :show="showImage" mode="center" @close="showImage = false" @open="showImage = true">
		<view class="swiperBox">
			<u-swiper :list="reviewfileArr" :autoplay="false" height="500" :current="current"></u-swiper>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, onMounted, reactive } from 'vue';
	import world from '@/static/wj.png'
	import { onLoad } from '@dcloudio/uni-app' // 新增引入

	const worldImg = ref(world)
	// 自定义导航栏的高度
	const navBarHeight = ref(0);

	// 返回上一页的方法
	const goBack = () => {
		uni.navigateBack();
	};
	const name = ref("相机")
	const showImage = ref(false)
	const current = ref(0)
	const fileDocUrls = ref([])
	const fileArr = ref([])
	const reviewfileArr = ref([])
	const fileEnd = ref(['.doc','.docx','.pdf'])
	
	// 拖动功能
	// const dragging = ref(false)
	// const currentIndex = ref(-1)
	// const startY = ref(0)
	// const currentY = ref(0)
	
	// const handleLongPress = () => {
	//   dragging.value = true;
	//   uni.vibrateShort(); // 震动反馈
	// }
	
	// const handleTouchStart = (index, e) => {
	//   if (!dragging.value) {
	// 	startY.value = e.touches[0].clientY;
	// 	currentIndex.value = index;
	//   }
	// }
	
	// const handleTouchMove = (index, e) => {
	//   if (!dragging.value) return;
	  
	//   const touch = e.touches[0];
	//   currentY.value = touch.clientY;
	//   const offset = currentY.value - startY.value;
	  
	//   // 更新当前项位置
	//   fileArr.value[index].translate = `translateY(${offset}px)`;
	  
	//   // 计算目标位置
	//   const targetIndex = calculateTargetIndex(touch.clientY);
	//   if (targetIndex !== index && targetIndex !== -1) {
	// 	swapItems(index, targetIndex);
	//   }
	// }
	
	// 点击功能
	const changeChoose = () => {
		if (name.value == "相机") {
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //相机
				success: function(res) {
					const tempFilePaths = res.tempFilePaths;
					tempFilePaths.forEach(item => {
						fileArr.value.push(item)
						reviewfileArr.value.push(item)
					})
				}
			});
		} else if (name.value == "相册") {
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					const tempFilePaths = res.tempFilePaths;
					tempFilePaths.forEach(item => {
						fileArr.value.push(item)
						reviewfileArr.value.push(item)
					})
				}
			});
		}
	}

	const nextStep = () => {
		if (fileArr.value.length > 0) {
			uni.navigateTo({
				url: `/pages/contractType/index?fileArr=${JSON.stringify(fileArr.value)}`
			})
		} else {
			uni.showToast({
				icon: 'error',
				title: '您还未选择合同！'
			})
		}
	}

	const previewImage = (index) => {
		showImage.value = true
		current.value = index
	}

	const detDocUrl = async (ossid, index) => {
		fileArr.value.splice(index, 1);
		uni.showToast({
			title: '删除成功！'
		})
	}
	
	const select = (e) => {
		e.tempFiles.forEach(item => {
			if(item.extname == "docx" || item.extname == "doc" || item.extname == "pdf") {
				fileArr.value.push(item.url)
			}else {
				fileArr.value.push(item.url)
				reviewfileArr.value.push(item.url)
			}
		})
	}
	
	const checkInclude = (str,arr) => {
		 return [...arr].some(element => str.includes(element));
	}

	onLoad((options) => {
		if (options.name) {
			name.value = options.name
			changeChoose()
		}
	})

	onMounted(async () => {
		try {
			const res = await uni.getSystemInfo();
			// 获取状态栏高度（刘海高度）
			const statusBarHeight = res.statusBarHeight;
			// 标准导航栏高度，一般为 44px（iOS）或 48px（Android）
			const defaultNavBarHeight = res.platform === 'ios' ? 44 : 48;
			// 计算自定义导航栏的高度
			navBarHeight.value = statusBarHeight + defaultNavBarHeight;
		} catch (error) {
			console.error('获取设备信息失败:', error);
		}
	});
</script>
<style>
	.uni-file-picker__lists.is-text-box {
		display: none;
	}
</style>
<style scoped>
	.contract {
		background-color: #f0f4f9;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.custom-nav-bar {
		position: relative;
		top: 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F2F3F5;
		z-index: 99;
	}

	.nav-title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		position: absolute;
		bottom: 20rpx;
	}

	.nav-back {
		font-weight: bold;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx
	}

	.main {
		width: 100vw;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		gap: 28rpx;
		padding-bottom: 100rpx;
	}

	.main .upLoadItem {
		width: calc((100vw - 100rpx)/3);
		height: calc((100vw - 100rpx)/3);
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
		transition: all 0.3s;
		z-index: 1;
	}
	.main .upLoadItem.active {
	  z-index: 2;
	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}
	.main .upLoadItem image {
		width: 100%;
	}

	.previewBox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 6rpx 20rpx;
		background-color: rgba(0, 0, 0, .2);
		color: #fff;
		border-radius: 30rpx;
		font-size: 30rpx;
		z-index: 9;
	}

	.fileDocUrlsDet {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #373737;
		height: 40rpx;
		width: 50rpx;
		display: flex;
		flex-direction: row;
		border-bottom-left-radius: 100px;
		align-items: center;
		justify-content: center;
		z-index: 3;
	}

	.addImage {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F2F3F5;
		border: 1px dashed #606266;
	}

	.swiperBox {
		position: fixed;
		top: 50%;
		left: 0;
		width: 100vw;
		transform: translateY(-50%);
	}

	.bottom {
		margin: 0 20rpx;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		width: calc(100vw - 40rpx);
		display: flex;
		justify-content: space-around;
		gap: 20rpx;
	}
	.bottom view {
		flex: 1;
	}
	.world{
		margin: 100rpx auto;
	}
	.world .ImageBox {
		width: 200rpx;
		margin: 40rpx auto;
	}
	.world .ImageBox image {
		width: 200rpx;
	}
	.btnBox {
		background: #409EFF;
		width: calc(100vw - 40rpx);
		color: #fff;
		text-align: center;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.text {
		color: #909399;
		margin: 40rpx auto;
		display: table;
		line-height: 50rpx;
	}
</style>